<template>
  <div class="player">
    <div class="left">
      <img class="disc" src="../assets/img/disc.png" alt="" />
      <img class="cover" :src="coverUrl" alt="" />
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/img/tag.png" alt="" /><span>{{ songName }}</span>
      </div>
      <div class="singer">歌手: <span> {{ singerName }}</span></div>
      <div class="album">所属专辑: <span> {{ albumName }} </span></div>
      <audio class="audio" controls="autoplay"  :src="musicUrl"></audio>
      <ul class="lyric-container">
        <li class="lyric" v-for="(item,index) in lyric" :key="'lyrics' + index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import musicss from '../mockdatas/oneSongUrl'
export default {
  data() {
      return {
        // 歌曲地址
        musicUrl:'',
        // 歌手
        singerName: '',
        // 封面
        coverUrl: '',
        // 专辑名
        albumName: '', 
        // 歌名
        songName: '',
        // 歌词
        lyric: [],
      };
    },
    // 生命周期钩子
   async created() {
      if (!this.$route.params.id) {
        alert("未传入歌曲 id 信息，请检查操作！")
        window.history.back(-1)
        return
      }
      
      let resc = await this.$axios.get('/song/url?id=' + this.$route.params.id)
      this.musicUrl = resc.data.data[0].url
      // console.log(resc);

      let res = await this.$axios.get('/song/detail?ids=' + this.$route.params.id)
      // console.log(res);
      // //歌手名
      this.singerName = res.data.songs[0].ar[0].name

      //歌名
      this.songName = res.data.songs[0].al.name
      // console.log(res);

      //专辑名
      this.albumName = res.data.songs[0].al.name

      //专辑封面
      this.coverUrl = res.data.songs[0].al.picUrl

        //获取歌词信息
        let geci = await this.$axios.get('/lyric?id=' + this.$route.params.id)
        this.lyric = geci.data.lrc.lyric.split('\n');
          // 循环数组 切掉 [00:00.000]
          for (let i = 0; i < this.lyric.length; i++) {
          this.lyric[i] = this.lyric[i].slice(11);
          }
    },
};
</script>

<style scoped>
@import "@/assets/css/player.css";
</style>